<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>调用全局Alert插件</h3>
    <ul>
      <li><button @click="handleOpen1">打开提示 1</button></li>
    </ul>
    <div class="track-progress">
      <progressbar :barwidth="60" /> <!--传百分比的值过去-->
    </div>
  </div>
</template>

<script>
import progressbar from './progress/progress.vue'
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg:''
    }
  },
  created() {
    this.$local.save('msg','这是插件设置的数据')
  },
  mounted() {
    this.msg = this.$local.fetch('msg')
  },
  methods: {
    handleOpen1() {
      this.$Alert.info({
        content: '这是Alert全局插件的消息'
      })
    }
  },
  components: {
    progressbar
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

/*进度条*/
.track-progress {
	position: absolute;
	bottom: 16px;
	width: 80%;
	height: 10px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
}
.track-progress:before,.track-progress:after {
	content:'';
	position: absolute;
	width: 23px;
	height: 30px;
}
.track-progress:before{
	left: -6px;
	bottom: 12px;
	background: url(../assets/images/icon_start.png) no-repeat;
}
.track-progress:after {
	right: -6px;
	bottom: 12px;
	background: url(../assets/images/icon_end.png) no-repeat;
}
</style>
